<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<!-- 避免IE使用兼容模式 -->
<meta http-equiv="X-UA-Compatible" content="IE=edge, chrome=1">
<meta name="renderer" content="webkit">
<!-- TopJUI框架样式 -->
<!-- FontAwesome字体图标 -->
<!-- <link rel="stylesheet" type="text/css" href="../../statics/plugins/easyui/themes/gray/easyui.css" /> -->
<!-- <link rel="stylesheet" type="text/css" href="../../statics/plugins/easyui/themes/icon.css" /> -->
<link type="text/css"
	href="../../topjui/themes/default/topjui.core.min.css" rel="stylesheet">
<!-- jQuery相关引用 -->
<script type="text/javascript"
	src="../../statics/plugins/jquery/jquery.min.js"></script>
	<link type="text/css" href="../../statics/plugins/layui/css/layui.css"
	rel="stylesheet" />
<script type="text/javascript"
	src="../../statics/plugins/easyui/jquery.easyui.min.js"></script>
<script type="text/javascript" src="../../statics/plugins/easyui/locale/easyui-lang-zh_CN.js"></script>
<script type="text/javascript"
	src="../../statics/public/js/topjui.config.js"></script>

<script type="text/javascript" src="../../topjui/js/topjui.core.min.js"></script>
<script type="text/javascript"
	src="../../topjui/js/locale/topjui.lang.zh_CN.js"></script>
	<script type="text/javascript"
	src="../../statics/plugins/layui/layui.js" charset="utf-8"></script>
</head>
<body style="border:0;margin:0;padding:0; background: rgb(250, 250, 250);">
	<div id="tb">
		<a href="#" class="easyui-linkbutton" style="line-height:28px;"iconCls="icon-add" plain="true" data-options="iconCls: 'fa fa-plus'" onclick="openAddDiag()">新增</a>
		
		<span>Item ID:</span>
		<input id="itemid" style="line-height:28px;border:1px solid #ccc">
		<span>Product ID:</span>
		<input id="productid" style="line-height:28px;border:1px solid #ccc">
		<a href="#" class="easyui-linkbutton " iconCls="icon-query" plain="true" style="line-height:28px;" onclick="javascript:alert('Save')">查询</a>
	</div>
		<div><ul id="tt" toolbar="#tb"></ul></div>
	<!-- 表格工具栏结束 -->

	<script>
	var ID ;
	$(window).resize(function(){
		$('#tt').treegrid('resize', {
			width:function(){return document.body.clientWidth;},
			height:function(){return document.body.clientHeight;},
		});
	});

	$('#tt').treegrid({    
	    url:'/dep/queryDep',  
	    title: '',
	    method:'get',
	    iconCls: 'icon-save',
	    pagination: true,
	    width:function(){return document.body.clientWidth;},
		height:function(){return document.body.clientHeight;},
	    singleSelect:true,
	    idField:'id',  //关键字段来标识树节点，不能重复  
	    treeField:'depname',  //树节点字段，也就是树节点的名称
	    fitColumns:true,
	    rownumbers:true,//显示一个行号列
	    collapsible:true,//收起表格的内容
	    loadMsg: '数据加载中...',
	    animate:true,//在节点展开或折叠的时候是否显示动画效果
	    lines:true,//显示treegrid行
	    columns:[[    
	        {field:'depname',title:'组织名称',width:100,align:'left'},    
	        {field:'depnum',title:'组织编号',width:60,align:'center'},    
	        {field:'id',title:'所属岗位',width:80,align:'center'} ,
	        {field:'operate',title:'操作',formatter:operateFormatter,width:80} 


	    ]],
	    onLoadSuccess:function(data){
	        $('#tt').treegrid('expandAll');//全部展开树节点
	    },
	    onClickRow:function(row){
	    	ID =row.id;
	    }
	});
	
	function openAddDiag(){
		if(ID==null || ID==''){
			$.iMessager.show({title: '我的消息', msg: '请选择一个节点', timeout: 5000, showType: 'slide'});// '消息窗口'组件
			return;
		}
			
		var $addDialog = $('<form id="dep-add"  style="width: 800px; height: 200px; margin: auto; display: none;"></form>');
		var diag = $addDialog.dialog({
		    title: '部门新建/编辑',
		    href: '/web/view/dep/dep_add.html',
		    modal: true,
		    resizable:true,
 		    maximizable:true,
		    collapsible:true,
		    buttons:[{
				text:'保存',
				handler:function(){
					if($('#dep-add').form('validate')) {
						  var formData = $("#dep-add").serialize();
						  var url = '/dep/insertDep';
				            $.post(url,formData+'&pid='+ID,function (res,status) {
				                if (status == 'success') { // 后台返回状态值
				                    $.iMessager.show({title: '我的消息', msg: res.message, timeout: 5000, showType: 'slide'});// '消息窗口'组件
				                 //   $("#productDg").iDatagrid('reload');// 刷新下表格数据
				                    diag.dialog("destroy");// 销毁dialog面板
				                } else {
				                    $.iMessager.show({title: '我的消息', msg: res.message, timeout: 5000, showType: 'slide'});// '消息窗口'组件
				                }
				            },'JSON');
					  }
				}
			},{
				text:'关闭',
				handler:function(){diag.dialog("destroy");}
			}],onClose: function () {
                $(this).dialog('destroy');//销毁
            }
		});
		$addDialog.dialog('open');
		
	}
	function operateFormatter(value, row, index) {
		  var htmlstr;
		if(row.pid==0){
			htmlstr = '<button class="layui-btn layui-btn-xs" onclick="openEditDiag(\'' + row.id + '\')">编辑</button>';
	        return htmlstr;
		}else{
			htmlstr = '<button class="layui-btn layui-btn-xs" onclick="openEditDiag(\'' + row.id + '\')">编辑</button>';
	        htmlstr += '<button class="layui-btn layui-btn-xs layui-btn-danger" onclick="deleteRow(\'' + row.id + '\')">删除</button>';
	        return htmlstr;
		}
      
    }
	</script>


</body>
</html>